<template>
  <el-card>
    <el-row>
      <el-button type="primary" size="small" @click="ChangeBtn(false)">
        <el-icon> <Pointer /> </el-icon> 场地申请</el-button
      >
      <el-button type="success" size="small" @click="ChangeBtn(true)">
        <el-icon> <Pointer /> </el-icon> 物资申请</el-button
      >
      -------------------
      <strong> {{ showVal ? "物资申请" : "场地申请" }}</strong>
    </el-row>
  </el-card>
  <el-card>
    <el-table
      v-loading="loading"
      v-if="showVal"
      :data="goodsTable"
      style="width: 100%"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column
        label="租用开始时间"
        prop="myStartTime"
      ></el-table-column>
      <el-table-column label="租用结束时间" prop="myEndTime"></el-table-column>
      <el-table-column label="租用原因" prop="reason"></el-table-column>
      <el-table-column label="租用器材" prop="goods.goodsname"></el-table-column>
      <el-table-column label="租用用户" prop="user.name"></el-table-column>
      <el-table-column label="租用数量" prop="rentnum"></el-table-column>
      <el-table-column label="操作">
        <template #default="props">
          <el-tag v-if="props.row.judge == 2">审批通过</el-tag>

          <div v-else>
            <el-button size="small" @click="goBtn(props.row, 1)" type="success"
              >通过</el-button
            >
            <el-button size="small" @click="goBtn(props.row, 0)" type="danger"
              >拒绝</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-table
      v-loading="loading"
      v-else
      :data="placeTable"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column
        label="租用开始时间"
        prop="myStartTime"
      ></el-table-column>
      <el-table-column label="租用结束时间" prop="myEndTime"></el-table-column>
      <el-table-column label="租用地点" prop="place.placename"></el-table-column>
      <el-table-column label="租用人" prop="user.name"></el-table-column>
      <el-table-column label="操作">
        <template #default="props">
          <el-tag v-if="props.row.judge2 == 1">审批通过</el-tag>
          <div v-else>
            <el-button size="small" @click="PBtn(props.row, 1)" type="success"
              >通过</el-button
            >
            <el-button size="small" @click="PBtn(props.row, 0)" type="danger"
              >拒绝</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import {
  ApiGetRecordByHig,
  ApiGetPlaceByHig,
  ApiGetJuByHig,
  ApiGetJuPlaceSchool,
} from "@/api/index";
import dayjs from "dayjs";
import { errorMessage, successMessage } from "@/utils/messageTips";
import { errorMonitor } from "stream";
export default defineComponent({
  name: "schoolMaster",
  setup() {
    let loading = ref<boolean>(false);
    let showVal = ref<boolean>(true);
    let goodsTable = ref();
    let placeTable = ref();
    const getInfoList = async () => {
      loading.value = true;
      const res = (await ApiGetRecordByHig()) as any;
      console.log(res);
      goodsTable.value = res.map((item) => {
        return {
          ...item,
          myStartTime: dayjs(item.starttime).format("YYYY-MM-DD HH:mm:ss"),
          myEndTime: dayjs(item.endtime).format("YYYY-MM-DD HH:mm:ss"),
        };
      });
      loading.value = false;
    };
    // 物资改变
    const goBtn = async (info, val) => {
      const res = await ApiGetJuByHig(
        info.userid,
        info.goodsid,
        info.myStartTime,
        info.myEndTime,
        val+1,
        info.rentnum
      );
      getInfoList();
      if (val == 1) {
        successMessage("审批成功！");
      } else {
        errorMessage("审批拒绝！");
      }
    };
    // 地点
    const PBtn = async (info, val) => {
      const res = await ApiGetJuPlaceSchool(
        info.userid,
        info.placeid,
        info.myStartTime,
        info.myEndTime,
        val+1
      );
      getPlaceList();
      if (val == 1) {
        successMessage("审批成功！");
      } else {
        errorMessage("审批拒绝！");
      }
    };

    const ChangeBtn = (val: boolean) => {
      if (val) {
        getInfoList();
        showVal.value = val;
      } else {
        getPlaceList();
        showVal.value = val;
      }
    };
    const getPlaceList = async () => {
      loading.value = true;
      const res = (await ApiGetPlaceByHig()) as any;
      placeTable.value = res.map((item) => {
        return {
          ...item,
          myStartTime: dayjs(item.starttime).format("YYYY-MM-DD HH:mm:ss"),
          myEndTime: dayjs(item.endtime).format("YYYY-MM-DD HH:mm:ss"),
        };
      });
      console.log(placeTable.value);
      loading.value = false;
    };
    onMounted(() => {
      getInfoList();
    });
    return {
      goodsTable,
      ChangeBtn,
      showVal,
      placeTable,
      loading,
      goBtn,
      PBtn,
    };
  },
});
</script>
